<!DOCTYPE html >
<html >
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title>雪花效果</title>
</head>
<body>
  <div id="box"></div>
  <script>
    //随机生成一个 不定位置的 雪花图片
    var box = document.getElementById('box');
    for(var a = 0;a<100;a++){
    box.innerHTML += '<img style="width: 30px;height:30px;position: absolute;left:'+Math.random()*-768+'px;top: '+Math.random()*768+'px;" src="xuehua.jpg">';
    }
    //获取到页面所有的雪花
    var imgs = box.getElementsByTagName('img');
    for(var a = 0;a<imgs.length;a++){
      move(imgs[a]);
    }
    function move(obj){
      setInterval(function(){
        obj.style.left = parseInt(obj.style.left)+1+'px' ;
        i = parseInt(Math.random()*100);
        if(i%3==0){
          obj.style.top = parseInt(obj.style.top)+1+'px' ;
        }else{
          obj.style.top = parseInt(obj.style.top)-1+'px' ;
        }
      },25);
    }
  </script>
</body>
</html>